<template>
  <div>
    <comment
      v-if="comment.parent.parent"
      :comment="comment.parent"
      :number="number - 1"
    ></comment>
    <div class="Comment" :class="{ tops: !comment.parent.parent }">
      <div class="content">
        <div class="top">
          <div class="floor">{{ number }}楼</div>
          <div class="nickname">{{ comment.parent.user.nickname }}</div>
          <div class="date">{{ comment.parent.create_date | date }}</div>
          <div
            class="answer"
            @click="reply(comment.parent.user.nickname, comment.parent.id)"
          >
            回复
          </div>
        </div>
        <div class="bottom">{{ comment.parent.content }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["comment", "number"],
  name: "comment",
  created() {},
  methods: {
    reply(nickname, id) {
      console.log(123);
      this.$bus.$emit("reply", nickname, id);
    },
    getuserinfo(nickname, id) {
      console.log(nickname, id);
    },
  },
};
</script>

<style scoped lang="less">
.Comment {
  border: 1px solid black;
  border-top: none;
  &.tops {
    border-top: 1px solid black;
  }
  .content {
    height: 60px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .top {
      display: flex;
      justify-content: space-between;
      height: 40px;
      line-height: 40px;
      .nickname {
        padding-right: 10px;
        padding-left: 10px;
      }
      .date {
        flex: 2;
      }
      .answer {
        padding-left: 10px;
        height: 40px;
        width: 40px;
        text-align: center;
      }
    }
  }
}
</style>
